<template>
  <div>
    <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
      <a-form-item label="问题跳转方式">
        <a-radio-group @change="radioChange" v-decorator="['jumpWay', { initialValue: 'ANSWER' }]">
          <a-radio value="ANSWER">
            问题详情页
          </a-radio>
          <a-radio value="KEFU">
            人工客服
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="问题标题">
        <a-input
          placeholder="请输入标题"
          :maxLength="30"
          v-decorator="[
            'title',
            {
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请输入标题'
                }
              ]
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item label="接待客服组ID" v-if="type == 'KEFU'">
        <a-input-number
        style="width:100%"
          placeholder="请输入七鱼客服组ID"
          v-decorator="[
            'kefuGroupId',
            {
              rules: [
                {
                  required: true,
                  message: '请输入七鱼客服组ID'
                }
              ]
            }
          ]"
        ></a-input-number>
      </a-form-item>
      <a-form-item label="问题答案" v-else>
        <a-textarea
        style="height:100px"
          placeholder="请输入答案"
          :maxLength="300"
          v-decorator="[
            'answer',
            {
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请输入答案'
                }
              ]
            }
          ]"
        ></a-textarea>
      </a-form-item>
      <a-row>
        <a-col :span="24" class="info-action">
          <a-button type="primary" @click="reset">返回</a-button>
          <a-button type="primary" html-type="submit" class="ml-20" :loading="loading">保存</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.ml-20{
  margin-left: 20px;
}
</style>
<script>
import { brands } from '../../util/brand'
import { addkf } from '@/api/micromall'
export default {
  data() {
    return {
      brands,
      formItemLayout: {
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 20 },
          sm: { span: 20 }
        }
      },
      loading: false,
      type: ''
    }
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler: function(n) {
        console.log('watch', n)
        if (n) {
          this.type = n.jumpWay
          this.$nextTick(() => {
            this.form.setFieldsValue({
              jumpWay: n.jumpWay,
              title: n.question
            })
            if (n.jumpWay == 'KEFU') {
              this.form.setFieldsValue({
                kefuGroupId: n.kefuGroupId
              })
            } else {
              this.form.setFieldsValue({
                answer: n.answer
              })
            }
          })
        } else {
          this.form.resetFields()
        }
      }
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'problemForm' })
  },
  methods: {
    radioChange(e) {
      this.type = e.target.value
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          this.submit(values)
        }
      })
    },
    async submit(values) {
      values.type = 3
      const { info } = this
      if (info) {
        values.id = info.id
      }
      const re = await addkf(values)
      if (re.code == 200) {
        this.$message.success(info ? '编辑成功' : '新增成功')
        this.reset()
      } else {
        this.$message.error(re.msg)
      }
    },
    reset() {
      this.form.resetFields()
      this.type = ''
      this.$emit('close')
    }
  }
}
</script>
